import React, { Component } from 'react'
import { connect } from 'react-redux'
import { View} from '@tarojs/components'
import Taro from "@tarojs/taro";
import { add, minus, asyncAdd } from '../../actions/counter'
import {echarts} from "../../components/charts/ec-canvas/echarts"
import './index.less'
import Yu from "../../components/yuqingfenxi"
import Media from "../../components/mediaActivity"

import Web from "../../components/webtongji"
import Regional from "../../components/regionalTongji";


type PageStateProps = {
  counter: {
    num: number
  }
}

type PageDispatchProps = {
  add: () => void
  dec: () => void
  asyncAdd: () => any
}

type PageOwnProps = {}
type IProps = PageStateProps & PageDispatchProps & PageOwnProps

interface Index {
  props: IProps;
}




function initChart(canvas, width, height, dpr) {
  const chart = echarts.init(canvas, null, {
    width: width,
    height: height,
    devicePixelRatio: dpr // new
  });



  canvas.setChart(chart);

  var option = {
    backgroundColor: "#ffffff",
    color: ["#37A2DA", "#32C5E9", "#67E0E3", "#91F2DE", "#FFDB5C", "#FF9F7F"],
    series: [{
      label: {
        normal: {
          fontSize: 14
        }
      },
      type: 'pie',
      center: ['50%', '50%'],
      radius: ['40%', '60%'],
      data: [{
        value: 55,
        name: '北京'
      }, {
        value: 20,
        name: '武汉'
      }, {
        value: 10,
        name: '杭州'
      }, {
        value: 20,
        name: '广州'
      }, {
        value: 38,
        name: '上海'
      }]
    }]
  };

  chart.setOption(option);
  return chart;
}

@connect(({ counter }) => ({
  counter
}), (dispatch) => ({
  add () {
    dispatch(add())
  },
  dec () {
    dispatch(minus())
  },
  asyncAdd () {
    dispatch(asyncAdd())
  }
}))
class Index extends Component {
  constructor(props) {
    super(props);
    this.state={

      ec: {
        onInit: initChart
      }
    }
  }

  componentWillReceiveProps (nextProps) {
    console.log(this.props, nextProps)
  }

  componentWillUnmount () { }






  render () {
    return (
      <View className='index'>
        <View className="bgc"></View>
        <View className="topSearch">
          <View className="searchBox">
            <View className='at-icon at-icon-search'></View>
            <View className="inpt" >人名、企业名、品牌、事件</View>
          </View>
          <view className="btnSearch">搜索</view>
        </View>
        <Regional></Regional>
        <Yu></Yu>
        <Media></Media>
        <Web></Web>
      </View>
    )
  }
}

export default Index

